<template>
	<view class="loan">
		<view class="Apply">
			<text class="Apply_title">申请金额</text>
			<text class="Apply_money">{{Apply.money}}.00</text>
			<view class="Apply_progress">
				<uni-icons class="minus" color="#fff" type="minus" size="30"  @click="plusIsMinusFn(0)"></uni-icons>
				 <view class="progress-box">
					<view class="progress">
						<view class="progress-bar"  ref="mySlider">
							<text class="min">5000元</text>
							
							<image class="progress-icons" @touchmove="touchmove" :style="{left:Apply.width+'%'}"  mode="aspectFill" src="../../static/img/Apply_money.png" ></image>
							<view class="progress-inner-bar" :style="{width:Apply.width+'%'}">
							</view>
							<text class="max">1000000元</text>
						</view>
					</view>
				</view>
				<uni-icons class="plus" color="#fff"  type="plus" size="30" @click="plusIsMinusFn(1)"></uni-icons>
			</view>
		</view>
		<view class="loan_time">
			<text class="title">借款期限</text>
			<view class="time">
				<view class="time_box"  v-for="(value,index) in loanTime"  :class="timeBoxIndex==index?'active':''" @click='timeBoxclick(index)' :key="index">{{value.key}}</view>
			</view>
		</view>
		<view class="repayment">
			<text class="title">每期还款</text><text class="money">{{repayment}}元</text><text class="notes">(日利率0.03% 月利息￥221.72元)</text>
		</view>
		<view class="usageOfLoan">
			<view class="uni-list">
				<view class="uni-list-cell">
					<text class="title">借款用途</text>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="index" :range="candidates">
							<view class="uni-input">{{candidates[index]}}</view>
							<uni-icons class="arrowdown" type="arrowdown" size="10"></uni-icons>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="borrowing">
			<checkbox-group class="agreement">
				<label>
					<checkbox value="cb" checked="true" color="#fff"  style="transform:scale(0.7)" />
					<text class="text">同意</text> <text class="orange">《委托授权协议》《借款协议》《平台服务协议》</text>
				</label>
			</checkbox-group>
			<button class="borrowingBt" @click="applyHandel">立即借款</button>
		</view>
		<view class="broadcast">
			<text>2020-04-08：<text  class="orange">135***4567</text> 成功借款 <text  class="orange">56780</text>元！</text>
		</view>
		<view class="advertisement">
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper"   autoplay="true" >
							<swiper-item>
								<view class="swiper-item">广告区域</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item">广告区域</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item">广告区域</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		data() {
			return {
				Apply:{
					money:5000,
					width: 0,
				},
				timeBoxIndex:0,
				loanTime:[
					{
						key : '1个月',
					},
					{
						key : '3个月',
					},
					{
						key : '6个月',
					},
					{
						key : '12个月',
					},
					{
						key : '24个月',
					},
					{
						key : '36个月',
					}
				],
				repayment:'8255.05',
				index: 0,
				candidates:[ '日常消费', '美体塑形','医美整形','其他']
			}
		},
		components: {uniIcons},
		methods: {
			touchmove(e){
				// console.log(this.$refs.mySlider.$el.getBoundingClientRect())
				// console.log(e.touches[0])
				let progressBarX = this.$refs.mySlider.$el.getBoundingClientRect().x //父盒子距离窗口左边的距离
				let progressBarWidth = this.$refs.mySlider.$el.getBoundingClientRect().width //父盒子宽度
				let X = e.touches[0].clientX
				if(X >= progressBarX && X <=progressBarX+progressBarWidth){
					this.Apply.width = (X-progressBarX)/progressBarWidth*100
					let moey =Math.round((X-progressBarX)/progressBarWidth*1000000)
					moey = Math.round(moey/100)*100
					if(moey < 10000){
						this.Apply.money=5000
					}else if(moey > 980000){
						this.Apply.money= 1000000;
					}else{
						this.Apply.money= moey;
					}
				}
				
			},
			// type 减款0 加款1
			plusIsMinusFn(type){
					if(type == 0){
						if(this.Apply.money>10000){
							this.Apply.money = this.Apply.money-5000
							this.Apply.width = this.Apply.money/10000
						}else{
							this.Apply.money = 5000
						}
					}else{
						if(this.Apply.money < 980000){
							this.Apply.money = this.Apply.money + 5000
							this.Apply.width = this.Apply.money/10000
						}else{
							this.Apply.money = 1000000
						}
					}
			},
			//选择借款期限
			timeBoxclick(index){
				this.timeBoxIndex=index
			},
			//选择借款用途
			bindPickerChange(e){
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			// 点击立即借款跳转
			applyHandel(){
				uni.redirectTo({
				    url: './profile'
				});
			}
		}
	}
</script>

<style lang="scss">
	.loan{
		.orange{
			color: #ED7D6B ;
		}
		.Apply{
			overflow: hidden;
			position: relative;
			height: 380rpx;
			background: url(../../static/img/bill_top_bg_375x245_@2x.png);
			background-size: 100%;
			color: #FFFFFF;
			.Apply_title{
				font-size: 40rpx;
				width: 160rpx;
				margin: 0 auto;
				display: block;
				margin-top: 50rpx;
			}
			.Apply_money{
				position:absolute;
				top: 120rpx;
				left: 50%;
				font-size: 90rpx;
				transform: translateX(-50%);
			}
			.Apply_progress{
				position: relative;
				margin-top: 160rpx;
				.minus{
					z-index: 10;
					position: absolute;
					top: -14rpx;
					left: 36rpx;
				}
				.progress-box{
					position: relative;
					.progress{
						width: 494rpx;
						height: 34rpx;
						margin: 0 auto;
						border-radius: 120rpx;
						background-color: #E64444;
						.progress-bar{
							width: 100%;
							height: 100%;
							position: relative;
							.min{
								position: absolute;
								top: 40rpx;
								left: 0;
								font-size: 24rpx;
							}
							.progress-inner-bar{
								height: 100%;
								position: absolute;
								border-radius: 120rpx;
							    background-color: #BB0505;
							}
							.progress-icons{
								position: absolute;
								top: -20rpx;
								width: 72rpx;
								height: 72rpx;
								margin-left: -35rpx;
								z-index: 1;
							}
							.max{
								position: absolute;
								top: 40rpx;
								right: 0;
								font-size: 24rpx;
							}
						}
					}
					
				}
				.plus{
					position: absolute;
					right: 36rpx;
					top: -14rpx;
				}
			}
		}
		.loan_time{
			height: 220rpx;
			border-bottom: 1px solid #E6E6E6;
			padding: 38rpx 28rpx;
			 box-sizing: border-box;
			.title{
				font-size: 32rpx;
			}
			.time{
				margin-top: 30rpx;
				.time_box{
					display: inline-block;
					width: 104rpx;
					height: 70rpx;
					line-height: 70rpx;
					border-radius: 8rpx;
					background-color: rgba(245, 245, 245, 1);
					color: #848484;
					font-size: 16px;
					text-align: center;
					font-family: Arial;
					border: 1px solid rgba(255, 255, 255, 0);
					margin-left: 10rpx;
				}
				.active{
					color:#FFFFFF;
					background-color: #E64444;
				}
				.time_box:first-child{
					margin-left: 0;
				}
			}
		}
		.repayment{
			height: 116rpx;
			padding: 36rpx 28rpx;
			font-size: 32rpx;
			text-align: left;
			box-sizing: border-box;
			border-bottom: 1px solid #E6E6E6;
			.title{
				color: rgba(102, 102, 102, 1);
			}
			.money{
				margin-left: 24rpx;
				margin-right: 10rpx;
				color: rgba(30, 30, 30, 1);
			}
			.notes{
				color: rgba(132, 132, 132, 1);
				font-size: 24rpx;
			}
		}
		.usageOfLoan{
			height: 112rpx;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(230, 230, 230, 1);
			padding: 30rpx 28rpx;
			.title{
				color: rgba(102, 102, 102, 1);
				font-size: 32rpx;
				text-align: left;
			}
			.uni-list-cell-db{
				position: relative;
				margin-left: 20rpx;
				display: inline-block;
				width: 226rpx;
				background-color: rgba(255, 0, 0, 0);
				color: #848484;
				font-size: 32rpx;
				border: 1px solid rgba(255, 255, 255, 0);
				.arrowdown{
					position: absolute;
					right: 30rpx;
					top: 10rpx;
				}
			}
		}
		.borrowing{
			height: 236rpx;
			padding: 0rpx 28rpx;
			overflow: hidden;
			.agreement{
				color: rgba(16, 16, 16, 1);
				font-size: 24rpx;
				margin: 28rpx 0 36rpx 0;
				.text{
					margin:0 5rpx 0 20rpx ;
				}
			}
			.borrowingBt{
				background-color: #ED7D6B;
				color: #FFFFFF;
			}
		}
		.broadcast{
			height: 86rpx;
			background-color: #F5F5F9;
			color: rgba(16, 16, 16, 1);
			font-size: 15px;
			padding: 20rpx;
			box-sizing: border-box;
			text-align: center;
		}
		.advertisement{
			.swiper-item{
				height: 318rpx;
				text-align: center;
				line-height: 318rpx;
				color: #fff;
				background: url(../../static/img/bill_top_bg_375x245_@2x.png);
				background-size: 100%;
			}
		}
		
	}
</style>
